<template>
  <div class="classification">
    <div class="header">
      <van-icon name="chat-o" class="icon-one" />
      <van-search
        v-model="value"
        @click="search"
        placeholder="请输入搜索关键词"
        class="sousuo"
      />
      <van-icon name="scan" class="icon-two" />
    </div>
    <div class="section" ref="aa">
      <!-- 左侧导航栏 -->
      <div class="ulone" ref="left">
        <ul>
          <li
            v-for="(item, index) in list"
            @click="onChange(index)"
            :key="index"
            :class="{ lis_one_color: index == current }"
            class="lis_one"
          >
            {{ item.name }}
            <!-- {{current}} -->
          </li>
        </ul>
      </div>

      <!--         <ul class="ulone">
          <li v-for="(item,index) in 100" :key="index">{{item}}</li>
        </ul> -->
      <!-- 右侧内容部分 -->

      <div class="ultwo" ref="right">
        <ul class="ul-two">
          <li v-for="(i, ind) in img" :key="ind" class="li">
            <!-- {{i.app_category_items}} -->
            <!-- {{item.cover}} -->
            <div
              class="ultwodiv"
              v-for="(item, index) in i.app_category_items"
              :key="index"
            >
              <van-image
                width="100%"
                height="80"
                :src="item.cover"
                class="vanimg"
              />
              <p>{{ item.name }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <tabbbar></tabbbar>
  </div>
</template>
<script>
import BetterScroll from "better-scroll";
import Tabbbar from "../components/tabbbar.vue";
export default {
  name: "classification",

  data() {
    return {
      active: "classification",
      activeKey: 0,
      value: "",
      list: [],
      img: [],
      flag: false,
      // 右侧滚动区域
      rightscrolltop: 0,
      currentIndex: 0,
      allHeight: [], //承载右侧每一块的高度值
      right: "",
      left: "",
      scroll: "", // 右侧滑动的BScroll
      scrollY: "", // 右侧滚动距离
    };
  },
  components: { Tabbbar },
  methods: {
    // tab栏监听事件
    leftClick() {
      let uls = this.$refs.right.getElementsByClassName("li");
      console.log(uls);
      let height = 0;
      this.allHeight.push(height);
      Array.from(uls).forEach((v) => {
        height += v.clientHeight;
        //  console.log(v.clientHeight);
        this.allHeight.push(height);
      });
    },
    onChange(index) {
      console.log(this.allHeight[index]);
      this.scroll.scrollTo(0, -this.allHeight[index], 300);
      // ul.scrollTop = this.allHeight[index] + 10;
    },

    getData() {
      this.$axios.get("/category/app_category").then((v) => {
        console.log(v);
        this.list = v.data.data;
        this.img = v.data.data;
        for (let i = 0; i < this.img.length; i++) {
          this.i = this.img[i];
          // console.log(this.i);
        }
      });
    },
    search() {
      this.$router.push("/search");
    },
  },
  computed: {
    current() {
      console.log(111);
      return this.allHeight.findIndex((item, index) => {
        // console.log(item,index);
        // 滚动距离
        // 1500>= 1400 && 1500< 2100
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];
      });
    },
  },
  mounted() {
    // 计算中间高度
    var aa = this.$refs.aa;
    aa.style.height = document.documentElement.clientHeight - 95 + "px";
    var bb = document.documentElement.clientHeight - 95 + "px";
    aa = bb;
    // console.log(aa);
    this.getData();
  },
  updated() {
    if (!this.scroll) {
      this.$nextTick(() => {
        this.scroll = new BetterScroll(this.$refs.right, {
          click: true,
          probeType: 3,
        });
        // 滚动事件
        this.scroll.on("scroll", (pos) => {
          // console.log(pos);
          this.scrollY = Math.abs(pos.y);
          // console.log(this.scrollY);
        });
        this.scroll.on("scrollEnd", (pos) => {
          //结束时触发事件获取一次位置，因为使用了模式2，惯性滚动不触发事件
          this.scrollY = Math.abs(Math.round(pos.y));
          this.flag = false;
        });
        this.leftClick();
        // console.log(this.scroll);
      });
    }
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-one {
  margin-left: 0.133333rem;
  /* width: 7%; */
}
.sousuo {
  width: 86%;
}
.icon-two {
  width: 7%;
  margin-left: 0.133333rem;
}
.section {
  /* width: 100%; */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
}
.ulone {
  width: 2.666667rem;
  /* overflow: auto;-webkit-overflow-scrolling:touch; */
}
.ultwo {
  width: 275px;
  height: 15rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.ultwo .li {
  /* border: 1px solid black; */
  height: 700px;
}
.ul-two {
  height: 4220px;
}
.ultwo li div {
  float: left;
  width: 33%;
  padding-left: 5px;
  box-sizing: border-box;
  height: 100px;
}
.ultwo p {
  text-align: center;
}

.lis_one {
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  /* width: 100%; */
  height: 50px;
  line-height: 36px;
  margin: 10px 0;
  padding: 7px 0;
  box-sizing: border-box;
}
.lis_one_color {
  color: rgb(255, 102, 0);
  border-left: 3px rgb(255, 102, 0) solid;
}
</style>